<template>
	<view class="select_warp">
		<view class="manage_tab">
			<view class="tab_array">
				<image @click="doSearch" :src="BASE_IMG_URL+'ss.png'" mode="scaleToFill"></image>
				<input @confirm="doSearch" type="text" placeholder-style="color:#999;" 
					:class="memberName ? 'fontactive' : ''" v-model="memberName" placeholder="客户名称" class="li_box" />
			</view>
			<view class="tab_screen" @click="screenClick" :class="{'sort_active':screen}">
				<image :src="BASE_IMG_URL+'shaixuan.png'" mode="scaleToFill"></image>
			</view>
		</view>
		<view style="height:100rpx"></view>
		<view class="warpbox" v-if="showsort || screen" @tap.stop="closeSelectwarp">
			<scroll-view scroll-y class="scrollbox" style="height:800rpx;background:#fff;">
				<!-- 排序模块 -->
				<view class="sort_content" v-if="showsort">
					<view class="sort_feedback">
						<view class="feedback_header">排序属性</view>
						<view class="feedback_main mar-180">
							<view class="main_con" :class="sortid == item.id ? 'tabactive' : '' "
								v-for="(item,index) in sortData" :key="index" @tap.stop="changeSortTab(item)">
								{{item.name}}
							</view>
						</view>
					</view>
				</view>
				<!--筛选模块  -->
				<view class="screen_content" v-if="screen" @tap.stop.prevent>
					<view class="fir_li" v-if="false">
						<view class="li_label">客户星级</view>
						<u-rate :count="5" @change="changeLevel" v-model="level" active-color="#FFD049" inactive-color="#b2b2b2" gutter="20"></u-rate>
					</view>
					<view class="fir_li">
						<view class="li_label">客户来源</view>
						<picker @change="changeSource" :value="sourceIndex" :range-key="'name'" :range="sourceList">
							<view class="li_box">
								<view class="form_right">
									<view :class="source ? 'fontactive' : ''">{{source ? source : '点击选择'}}</view>
									<view class="iconfont icon-arrows_right"></view>
								</view>
							</view>
						</picker>
					</view>
					<view class="fir_li">
						<view class="li_label">跟进状态</view>
						<picker @change="changeFollow" :value="followIndex" :range-key="'name'" :range="followList">
							<view class="li_box">
								<view class="form_right">
									<view :class="follow ? 'fontactive' : ''">{{follow ? follow : '点击选择'}}</view>
									<view class="iconfont icon-arrows_right"></view>
								</view>
							</view>
						</picker>
					</view>
					<view class="fir_li" v-if="false&&!isSeas">
						<view class="li_label">客户分类</view>
						<picker @change="changeType" :value="typeIndex" :range="typeList">
							<view class="li_box">
								<view class="form_right">
									<view :class="type ? 'fontactive' : ''">{{type ? type : '点击选择'}}</view>
									<view class="iconfont icon-arrows_right"></view>
								</view>
							</view>
						</picker>
					</view>
					<view class="fir_li" v-if="!isSeas">
						<view class="li_label">归属人</view>
						<picker @change="changeAscrip" :value="ascripIndex" :range-key="'name'" :range="ascripList">
							<view class="li_box">
								<view class="form_right">
									<view :class="ascripList[ascripIndex] ? 'fontactive' : ''">
										{{ascripList[ascripIndex] ? ascripList[ascripIndex].name : '点击选择'}}</view>
									<view class="iconfont icon-arrows_right"></view>
								</view>
							</view>
						</picker>
					</view>
					<view class="fir_li" v-if="false">
						<view class="li_label">新增客户时间</view>
						<view class="li_box" style="display: flex;justify-content: space-around;">
							<picker @change="changeNewStartTime" mode="date"
								style="width:50%;border-right:1rpx solid #CCCCCC">
								<view class="form_right">
									<view style="flex:1;text-align: center;"
										:class="new_start_time ? 'fontactive' : ''">
										{{new_start_time ? new_start_time : '开始时间'}}</view>
									<view class="iconfont icon-arrows_right"></view>
								</view>
							</picker>
							<picker @change="changeNewEndTime" mode="date" style="width:50%">
								<view class="form_right">
									<view style="flex:1;text-align: center;" :class="new_end_time ? 'fontactive' : ''">
										{{new_end_time ? new_end_time : '结束时间'}}</view>
									<view class="iconfont icon-arrows_right"></view>
								</view>
							</picker>
						</view>
					</view>
					<view class="fir_li" v-if="false">
						<view class="li_label">下次联系时间</view>
						<view class="li_box" style="display: flex;justify-content: space-around;">
							<picker @change="changeStartTime" mode="date"
								style="width:50%;border-right:1rpx solid #CCCCCC">
								<view class="form_right">
									<view style="flex:1;text-align: center;" :class="start_time ? 'fontactive' : ''">
										{{start_time ? start_time : '开始时间'}}</view>
									<view class="iconfont icon-arrows_right"></view>
								</view>
							</picker>
							<picker @change="changeEndTime" mode="date" style="width:50%">
								<view class="form_right">
									<view style="flex:1;text-align: center;" :class="end_time ? 'fontactive' : ''">
										{{end_time ? end_time : '结束时间'}}</view>
									<view class="iconfont icon-arrows_right"></view>
								</view>
							</picker>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="button_bottom">
				<view @tap.stop="reset">重置</view>
				<view @tap.stop="sureQuery">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		netSelect,
		netSearchStaffList
	} from '@/api/kehu.js'
	import {
		BASE_IMG_URL
	} from '@/util/api.js'
	export default {
		data() {
			return {
				Strname: "", //搜索字串
				BASE_IMG_URL: BASE_IMG_URL,
				showsort: false,
				screen: false,
				date: '',
				show: false,
				start_time: '', //开始时间
				end_time: '', //结束时间

				sortid: '', //排序id

				memberName: '', //客户名称
				level: '', //客户星级
				source: '', //客户来源
				sourceList: [],
				sourceIndex: null,
				follow: '', //跟进状态
				followList: [],
				followIndex: null,
				createtime: '', //新增客户时间
				new_start_time: '', //新增客户开始时间
				new_end_time: '', //新增客户结束时间

				next_time: '', //下次跟进时间
				type: '', //客户分类  '0 全部客户','1 我的客户','2 下属负责的客户'
				typeList: ['全部客户', '我的客户', '下属负责的客户'],
				typeIndex: null,

				//归属人
				ascripList: [],
				ascripIndex: null,
				ascripId: null,
				count:5,
				value:1
			}
		},
		props: {
			sortData: {
				type: Array,
				default: []
			},
			de_type: { //客户分类
				type: Number,
				default: null
			},
			de_starttime: { //开始时间
				type: String,
				default: null,
			},
			de_endtime: { //结束时间
				type: String,
				default: null
			},
			isSeas: {
				type: Boolean,
				default: false
			},
			de_staffid: { //归属人
				type: Number, 
				default: null
			}
		},
		created() {
			this.typeIndex = this.de_type == 0 ? 1 : this.de_type == 1 ? 0 : null
			this.type = this.typeList[this.typeIndex]
			this.new_start_time = this.de_starttime
			this.new_end_time = this.de_endtime
			this.ascripId = this.de_staffid

			this.getSelect()

			//归属人
			this.getGuishu()
		},
		methods: {
			//搜索
			doSearch() {
				this.showsort = false;
				this.screen = false;
				let params = {
					condition:this.memberName,
				}
				if (!this.isSeas) {
					params = Object.assign({}, params, {
						type: this.typeIndex,
						staff_id: this.ascripId
					})
				}
				this.$emit('queryData', params)
			},
			getSelect() {
				netSelect().then(res => {
					this.sourceList = res.data['MEMBER_SOURCE']
					this.followList = res.data['MEMBER_SALESTATUS_CATEGORY']
				})
			},
			//归属人
			getGuishu() {
				netSearchStaffList().then(res => {
					this.ascripList = res.data
					if (this.ascripId) {
						this.ascripList.forEach((ele, index) => {
							if (ele.id == this.ascripId) {
								this.ascripIndex = index
							}
						})
					}
				})
			},
			sortClick() {
				this.showsort = !this.showsort;
				this.screen = false;
				this.$emit('sortClick', this.showsort);
			},
			screenClick() {
				this.screen = !this.screen;
				this.showsort = false;
				this.$emit('screenClick', this.screen);
			},
			closeSelectwarp(e) {
				e.stopPropagation()
				this.showsort = false
				this.screen = false
				this.$emit('sortClick', this.showsort);
				this.$emit('screenClick', this.screen);
			},
			// 新增客户 开始时间
			changeNewStartTime(e) {
				this.new_start_time = e.detail.value
			},
			//新增客户  结束时间
			changeNewEndTime(e) {
				this.new_end_time = e.detail.value
			},
			//选择 排序条件
			changeSortTab(item) {
				this.sortid = item.id
			},
			changeLevel(e) {
				this.level = e
			},
			//客户分类
			changeType(e) {
				this.typeIndex = e.detail.value
				this.type = this.typeList[e.detail.value]
			},
			//下次联系  时间
			changeStartTime(e) {
				this.start_time = e.detail.value
			},
			changeEndTime(e) {
				this.end_time = e.detail.value
			},
			//客户来源
			changeSource(e) {
				this.sourceIndex = e.detail.value
				this.source = this.sourceList[e.detail.value].name
			},
			//跟进状态
			changeFollow(e) {
				this.followIndex = e.detail.value
				this.follow = this.followList[e.detail.value].name
			},
			//客户 新增 时间
			changeCreatetime(e) {
				this.createtime = e.detail.value
			},
			//归属人
			changeAscrip(e) {
				this.ascripIndex = e.detail.value
				this.ascripId = this.ascripList[this.ascripIndex].id
			},
			//重置
			reset() {
				if (this.showsort) {
					this.sortid = null
				}
				if (this.screen) {
					// this.name = ''
					this.level = ''
					this.source = ''
					this.sourceIndex = null
					this.follow = ''
					this.followIndex = null
					this.next_time = ''
					this.typeIndex = null
					this.type = '',
						this.start_time = ''
					this.end_time = '',
						this.createtime = '',
						this.new_start_time = '',
						this.new_end_time = '',
						this.ascripIndex = null
					this.ascripId = null
				}
			},
			//确定
			sureQuery() {
				this.showsort = false;
				this.screen = false;
				let params = {
					sort: this.sortid,
					// name:this.name,
					level: this.level,
					source: this.source,
					follow: this.follow,
					saleStatus_category: this.follow,
					createtime: (this.new_start_time && this.new_end_time) ? (this.new_start_time + ',' + this
						.new_end_time) : '',
					next_time: (this.start_time && this.end_time) ? (this.start_time + ',' + this.end_time) : ''
				}
				if (!this.isSeas) {
					params = Object.assign({}, params, {
						type: this.typeIndex,
						staff_id: this.ascripId,
						staffId: this.ascripId,
					})
				}
				this.$emit('queryData', params)
			}

		}
	}
</script>

<style lang="scss">
	.fontactive {
		color: #333;
	}

	.select_warp {
		z-index: 9;
		position: relative;
	}

	.custom {
		padding: 100rpx 0 180rpx;
		text-align: center;
		color: #03aa96;
		font-size: 28rpx;
	}

	.warpbox {
		position: fixed;
		width: 750rpx;
		left: 0;
		top: 80rpx;
		bottom: 0;
		z-index: 2;
		background: rgba(0, 0, 0, 0.7);
		// height:890rpx;
	}

	.screen_content {
		width: 702rpx;
		z-index: 2;
		border-top: 1rpx solid #CCCCCC;
		background-color: #fff;
		padding: 24rpx;

		.fir_li {
			margin-bottom: 20rpx;

			.li_label {
				font-size: 28rpx;
				color: #333333;
				margin-bottom: 15rpx;
			}

			.li_box {
				// width:700rpx;
				width: 100%;
				border-radius: 15rpx;
				border: 1rpx solid #CCCCCC;
				height: 60rpx;
				padding: 0 35rpx;
				line-height: 60rpx;
				color: #999;
				
			}

			.form_right {
				display: flex;
				justify-content: space-between;

				image {
					width: 40rpx;
					height: 40rpx;
					margin: 28rpx 5rpx 0 0;
				}

			}
		}
	}

	.sort_content {
		background-color: #fff;
		padding-top: 24rpx;
		width: 750rpx;
		z-index: 2;
		border-top: 1rpx solid #CCCCCC;

		.sort_feedback {
			margin-bottom: 20rpx;
			margin-top: 20rpx;

			.feedback_header {
				padding: 0 0 30rpx 24rpx;
				font-size: 28rpx;
				font-weight: 700;
			}

			.feedback_main {
				padding: 0 24rpx;

				.main_con {
					padding-left: 20rpx;
					background-color: #fff;
					height: 80rpx;
					line-height: 80rpx;
					border: 1rpx solid #EAEAEA;
				}

				.tabactive {
					border: 1rpx solid #ff7800;
					color: #ff7800;
				}
			}
		}
	}

	.manage_tab {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #03AA96;
		display: flex;
		justify-content: space-around;
		margin-bottom: 40rpx;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;

		.tab_array {
			display: flex;
			background: #fff;
			border-radius: 34rpx;
			height: 68rpx;
			width: 467rpx;
			overflow: hidden;
			image {
				width: 50rpx;
				height: 50rpx;
				margin: 8rpx 15rpx 0 28rpx;
			}

			input {
				line-height: 68rpx;
				height: 68rpx;
			}
		}

		.tab_screen {
			display: flex;

			image {
				width: 43rpx;
				height: 44rpx;
				margin-top: 10rpx;
			}
		}
	}

	.active {
		&::after {
			content: '';
			float: right;
			margin-right: 40rpx;
		}
	}

	.mar-180 {
		margin-bottom: 180rpx;
	}

	.button_bottom {
		display: flex;
		width: 100%;
		height: 90rpx;
		background-color: #fff;
		line-height: 90rpx;
		text-align: center;
		font-size: 32rpx;

		:first-child {
			flex: 1;
			color: #03aa96;
			border-top: 1rpx solid #CCCCCC;
		}

		:last-child {
			flex: 1;
			background-color: #03aa96;
			color: #fff;
		}
	}

	.sort_active {
		color: #03aa96;
	}

	// 筛选中的点击事件
	.screen_active {
		border: 1rpx solid #03aa96 !important;
	}
</style>
